/* components */
import CustomerContactTable from '@src/modules/customer/view/components/CustomerContactTable.vue'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* vue */
import VC from '@model/VC'
import { Component, Ref, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'
/* scss */
import '@src/modules/customer/list/operationDialog/CustomerLinkmanDialog/CustomerLinkmanDialog.scss'
import i18n from '@src/locales'


@Component({ 
  name: ComponentNameEnum.CustomerLinkmanDialog,
  components: {
    [CustomerContactTable.name]: CustomerContactTable
  }
})
export default class CustomerLinkmanDialog extends VC {
  
  @Ref() readonly CustomerContactTableComponent!: CustomerContactTable
  
  @Prop({ default: '' }) readonly customerId: string | undefined
  
  private pending: boolean = false
  private showDialog: boolean = false
  
  private cancel() {
    // do some things...
  }
  
  private confirm() {
    // do some things...
  }
  
  private getCustomerContactList() {
    // @ts-ignore
    return this.CustomerContactTableComponent?.outsideGetContactList() || []
  }
  
  private outsideShow() {
    this.show()
  }
  
  private onCustomerContactFirstLoadedHandler() {
    const customerContactList = this.getCustomerContactList()
    return customerContactList.filter((linkman: any) => linkman.externalUserId)
  }
  
  private show() {
    this.showDialog = true
  }
  
  /**
   * @description 获取属性
  */
  private getAttributes() {
    return {
      props: {
        title: i18n.t('customer.customerLinkmanDialog.title'),
        show: this.showDialog
      },
      on: {
        'update:show': (val: boolean) => {
          this.showDialog = val
        }
      },
      directives: [
        {
          name: 'loading',
          value: this.pending
        }
      ]
    }
  }
  
  render(h: CreateElement) {
    const attrs = this.getAttributes()
    
    return (
      <div class={ComponentNameEnum.CustomerLinkmanDialog}>
        <base-modal {...attrs}>
          <customer-contact-table  
            ref='CustomerContactTableComponent'
            shareData={{ customer: { id: this.customerId } }}
            onFirstLoaded={() => this.onCustomerContactFirstLoadedHandler()} 
          />
          <div slot='footer' class='dialog-footer'>
            <el-button type='ghost' onClick={() => this.cancel()}>{i18n.t('common.base.cancel')}</el-button>
            <el-button type='primary' onClick={() => this.confirm()}>{i18n.t('common.base.confirm')}</el-button>
          </div>
        </base-modal>
      </div>
    )
  }
}

